<template>
<scroll-view scroll-y="true" class="my-exer">
  <!-- <view class="container"> -->
		<!-- 返回按钮 -->
		<uni-search-bar
		  v-model="queryForm.keyword"
		  placeholder="请输入文件名称进行搜索"
		  :focus="false"
		  @confirm="fetchFileList(currentParentId)"
		  @cancel="
			queryForm.keyword = '';
			fetchFileList(currentParentId);
		  "
		></uni-search-bar>
		<view v-if="currentParentId != -1" class="back-button" @click="goBack">
		  <uni-icons type="arrow-left" size="20" color="#333"></uni-icons>
		  <text class="title">返回</text>
		</view>
		<!-- \e680 -->
		<!-- 文件/文件夹列表 -->
		<uni-list class="list_content ldBg">
			 <view class="noData" v-if="fileList === 0"> 暂无资料 </view>
	<!-- 		 <uni-list-item
				:title="item.resourceName"
				link
				showArrow
				:show-extra-icon="true"
				:extra-icon="getFileType(item.resourceType)"
				v-for="item in fileList"
				:key="item.id"
			  /> -->
			  <view v-for="(item,index) in fileList" class="card data_card" bindtap="click" :key="item.id" >
				<!-- 包裹两行文字 -->
				<view @click="handleItemClick(item)" style=" display: flex;align-items: center;">
					<uni-icons style="margin-left: 10rpx;" :type="getFileType(item.resourceType).type" :color="getFileType(item.resourceType).color" :size="getFileType(item.resourceType).size"></uni-icons>
					<view class="question-type" v-html="item.resourceName"></view>
				</view>
			  </view>
		</uni-list>
    
  <!-- </view> -->
</scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import http from "@/utils/request.js";

const fileList = ref([]);
const queryForm = reactive({
  // 查询表单
  keyword: "", // 名称
});
let currentParentId = ref(-1);
let parentStack = [];

const fetchFileList = async (parentId) => {

  try {
    const requestData =
      parentId !== -1
        ? { parentId, search: queryForm.keyword }
        : { search: queryForm.keyword };
    const response = await http.post("resource/listResource", requestData);
    if (response.code === 200) {
      if (parentId !== currentParentId.value) {
        // 只有在进入新的文件夹时才将当前父节点ID加入栈中
        parentStack.push(currentParentId.value);
      }
      currentParentId.value = parentId;
      fileList.value = response.data.list;
    } else {
      uni.showToast({
        title: "获取文件列表失败",
        icon: "none",
      });
    }
  } catch (error) {
    uni.showToast({
      title: "获取文件列表失败",
      icon: "none",
    });
  }
};

// 返回上一层按钮点击事件
const goBack = () => {
  if (parentStack.length > 0) {
    // 弹出栈顶元素作为上一层父节点ID
    const previousParentId = parentStack.pop();
    // 设置当前父节点ID为上一层父节点ID
    currentParentId.value = previousParentId;
    // 返回上一层时，重新获取文件列表
    fetchFileList(previousParentId);
  } else {
    // 当前已经是顶层目录，提示已经是顶层目录
    uni.showToast({
      title: "已经是顶层目录",
      icon: "none",
    });
  }
};
// 处理点击文件/文件夹事件
const handleItemClick = (item) => {
  if (item.isFolder) {
    // 如果是文件夹，则更新当前的parentId，并重新获取文件列表
    fetchFileList(item.id);
  } else {
    // 如果是文件，则直接访问其路径
    window.open(item.httpUrl, "_blank");
  }
};

// 根据资源类型返回对应的文字
const getFileType = (resourceType) => {
  switch (resourceType) {
    case "1":
      //文件夹
      return {
        color: "#01bafd",
        size: "22",
        type: "folder-add-filled",
      };
    case "2":
      // 图片
      return {
        color: "#4cd964",
        size: "22",
        type: "image",
      };
    case "3":
      //文档
      return {
        color: "#eb2f96",
        size: "22",
        type: "compose",
      };
    case "4":
      //视频
      return {
        color: "#fa8c16",
        size: "22",
        type: "videocam-filled",
      };
    case "5":
      //音频
      return {
        color: "#722ed1",
        size: "22",
        type: "mic-filled",
      };
    case "6":
      //其他文件
      return {
        color: "#faad14",
        size: "22",
        type: "mail-open",
      };
    default:
      return ""; // 默认为空
  }
};
const cancel = () => {
  search.value = "";
  fetchFileList(currentParentId.value);
};
// 页面加载时获取顶层文件列表
onMounted(() => {
  fetchFileList(currentParentId.value); // parentId为null表示获取顶层文件列表
});




</script>

<style scoped>
.back-button {
  margin-left: 10rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.list_content {
  height: calc(100vh - 100rpx);
  overflow-y: auto;
  padding-bottom: 160rpx;
}

.noData {
  text-align: center;
  margin-top: 50%;
}

/* 卡片圆角 阴影效果*/
.card {
  margin: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
}
.question-type{
	margin: 20rpx;
	margin-top: 15rpx;
	display: flex;
	font-size: 30rpx;
	color: #181818;
	flex: 1;
}
</style>
